<template>
  <el-card class="main-card">
    <com-area title="查询条件">
      <template v-slot:main>
        <com-search
          ref="neuSearch"
          :config="searchParams.config"
          :formData="searchParams.formData"
          :buttons="searchParams.button"
          :searchLayoutParam="searchParams.searchLayoutParam"
        />
      </template>
    </com-area>
    <com-area
      title="角色列表"
      :loading="loading"
      :loading-size="1"
      :auto="true"
    >
      <template v-slot:toolbar>
        <com-toolBar :btnList="toolBarParams.btnList" />
      </template>
      <template v-slot:main>
        <com-table
          ref="table"
          :data="tableParams.tableData"
          :options="tableParams.options"
          :export="null"
          @search="search"
        />
      </template>
    </com-area>
    <!--新增修改对话框 -->
    <el-dialog :visible.sync="addOrEditModal" width="30%" top="9vh">
      <div class="dialog-title-container" slot="title" ref="roleTitle" />
      <el-form label-width="80px" size="medium" :model="roleForm">
        <el-form-item label="角色名">
          <el-input v-model="roleForm.roleName" style="width:250px" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.roleLabel" style="width:250px" />
        </el-form-item>
        <el-form-item label="是否禁用">
          <template slot-scope="scope">
            <el-switch
              v-model="roleForm.isDisable"
              active-color="#13ce66"
              inactive-color="#F4F4F5"
              :active-value="1"
              :inactive-value="0"
            /></template>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addOrEditModal = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateRole">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getRoles, getRoleById, addRole, updateRole, deleteRole } from '@/api/system/role'
import searchParams from "./SearchParams";
import tableParams from "./TableParams";
import toolBarParams from "./ToolBarParams";

export default {
  created() {
    this.search();
  },
  data: function() {
    return {
      searchParams: searchParams(this),
      tableParams: tableParams(this),
      toolBarParams: toolBarParams(this),
      loading: true,
      isDelete: false,
      currentPage: 1,
      pageSize: 10,
      addOrEditModal: false,
      addOrEditType: "",
      roleForm: {
        roleName: "",
        roleLabel: ""
      }
    };
  },
  methods: {
    search(reqParams) {
      console.log(reqParams);
      getRoles({
          currentPage: reqParams ? reqParams.currentPage : this.currentPage,
          pageSize: reqParams ? reqParams.pageSize : this.pageSize,
          roleName: reqParams? reqParams.roleName : ""
        })
        .then(({ data }) => {

          this.tableParams.options.currentPage = data.currentPage;
          this.tableParams.options.pageSize = data.pageSize;
          this.tableParams.options.total = data.total;
          this.tableParams.tableData = data.result;
          this.loading = false;
        });
    },
    openAddOrEditModel(role,type) {
      this.addOrEditType = type;
      this.$refs.roleTitle.innerHTML = role ? "修改角色" : "新增角色";
      if (role != null) {
        this.roleForm = JSON.parse(JSON.stringify(role));
      } else {
        this.roleForm = {
          roleName: "",
          roleLabel: ""
        };
      }
      this.addOrEditModal = true;
    },
    async addOrUpdateRole() {
      if (this.roleForm.roleName.trim() == "") {
        this.$message.error("角色名不能为空");
        return false;
      }
      let result;
      if(this.addOrEditType === "add") {
        await addRole(this.roleForm).then(data => {
          result = data;
        });
      }else{
        await updateRole(this.roleForm).then(data => {
          result = data;
        });
      }

      if (result.flag) {
        this.$notify.success({
          title: "成功",
          message: result.message
        });
        this.search();
      } else {
        this.$notify.error({
          title: "失败",
          message: result.message
        });
      }
      this.addOrEditModal = false;
    }
  }
};
</script>
<style scoped></style>
